<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script>
<script type="text/javascript">

YUI().use("attribute",'event','event-custom','event-synthetic','node',function(Y) {
	
	Y.on('bill:due', function (data) {
	    // Event facades have standard properties and methods as well as properties
	    // from payload data passed to fire()
		alert(data['payee']);
	});
	
	Y.fire('bill:due', {
	    payee: 'Great Aunt Myra',
	    amount: 20
	});
	
/*
	Y.on('key',function(e){
		Y.log(e);
		alert(e.keyCode);
	},'#mytextarea',"press:tab,backspace,j");
*/
	
	Y.on('key',function(e){
   		Y.one("#keyc").setContent(e.keyCode);
		e.preventDefault();
	// if you want to prevent default behaviors,
	//   e.preventDefault();
	//   e.stopPropagation();
},'#mytextarea',"down:tab,backspace,j");
	
    function MyClass() {
        ;
    }

    Y.augment(MyClass, Y.Attribute);
    
    var mc = new MyClass();
    
/*    
    mc.addAttr("attrA", {
        // Configuration for attribute "attrA"
        value: 5,
        setter: function(val) {
            return Math.min(val, 10); 
        },

        validator: function(val) {
            return Y.Lang.isNumber(val);
        }
    });
*/    
    mc.set('attrA',6);
    
	mc.on("attrAChange", function(event) {
	    // event.prevVal will contain the current attribute value
	    var val = event.prevVal;
		Y.log(val);
		Y.log(event.newVal);
	});

	mc.set('attrA',12);

    Y.log(mc.get('attrA'));
    

});

</script>
</head>
<body>
<form>
<div id="keyc"></div>
<textarea rows="" cols="" id="mytextarea" tabindex="1"></textarea>
</form>
</body>
</html>